<template>

  <a-drawer
    :title="title"
    width="40%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @close="handleCancel"
    cancelText="关闭"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <a-spin :spinning="confirmLoading">

      <a-form :form="form">

        <template v-if="title==='新增'">
          <a-form-item label="门店" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <!--<j-select-terminal placeholder="请选择门店" v-decorator="['terminals', validatorRules.terminals]"-->
            <!--:trigger-change="true"></j-select-terminal>-->
            <app-stores placeholder="请选择门店" @select="selects"
                        v-decorator="['terminalCode', validatorRules.terminalCode]"
                        :trigger-change="true"></app-stores>
          </a-form-item>
          <CodeConfigModal
            modal-width="90%"
            :showCode="this.showCode"
            ref="CodeConfigModal"
            @ok="handelSaveOk">
          </CodeConfigModal>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback label="归属经销商名">
            <a-input-search placeholder="经销商名称" readonly v-model="custName" @search="handleToCust">
            </a-input-search>
<!--            <a-button icon="search" @click=""></a-button>-->
          </a-form-item>
        </template>

        <template v-if="title==='编辑'">
          <a-form-item label="门店编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder="请输入门店编号" v-decorator="['terminalCode', validatorRules.terminalCode]"
                     readOnly/>
          </a-form-item>
          <a-form-item label="门店名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder="请输入门店名称" v-decorator="['terminalName', validatorRules.terminalName]"
                     readOnly/>
          </a-form-item>
          <a-form-item label="经销商编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder="请输入经销商编号" v-decorator="['custCode', validatorRules.custCode]"
                     readOnly/>
          </a-form-item>
          <a-form-item label="经销商名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder="请输入经销商名称" v-decorator="['custName', validatorRules.custName]"
                     readOnly/>
          </a-form-item>
        </template>

        <a-form-item label="积分余额(期初)" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="0" v-decorator="['scoreNum', {}]" :readOnly="title==='编辑'"/>
        </a-form-item>

        <template v-if="title==='编辑'">
          <a-form-item label="调整值(正负整数)" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder="0" v-decorator="['currentNum', validatorRules.currentNum]"/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="备注">
            <a-textarea placeholder="请输入调整理由" v-decorator="['remarks', validatorRules.remarks]"/>
          </a-form-item>
        </template>

      </a-form>

    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleOk" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>

</template>

<script>
import CodeConfigModal from '@/components/cn-select-popup/CodeConfigModal'
// import appStores from '@/views/mdm/couponStore/modules/appStores'
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import JImageUpload from '@/components/cn-form/JImageUpload'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JSelectUserByDep from '@/components/cn-select-popup/JSelectUserByDep'
import JSelectTerminal from '@/components/cn-select-popup/JSelectTerminal'

export default {
  name: 'TerminalIntegralModal',
  components: {
    JImageUpload,
    AFormItem,
    ATextarea,
    JTreeSelect,
    JSelectUserByDep,
    JSelectTerminal,
    // appStores,
    CodeConfigModal
  },
  data() {
    return {
      custCode: '',
      custName: '',
      showCode: '经销商选择',
      terminalName: '',
      terminalCode: '',
      title: '操作',
      visible: false,
      selecttype: '',
      model: {},
      toggleSearchStatus: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,

      form: this.$form.createForm(this),

      validatorRules: {
        terminals: {
          rules: [{
            required: true, message: '', trigger: 'submit'
          }]
        },
        terminalCode: {
          rules: [{
            required: true, message: '', trigger: 'submit'
          }]
        },
        terminalName: {
          rules: [{
            required: true, message: '', trigger: 'submit'
          }]
        },
        custCode: {
          rules: [{
            required: true, message: '', trigger: 'submit'
          }]
        },
        custName: {
          rules: [{
            required: true, message: '', trigger: 'submit'
          }]
        },
        currentNum: {
          rules: [{
            required: true, message: '', trigger: 'submit'
          }]
        },
        remarks: {
          rules: [{
            required: true, message: '', trigger: 'submit'
          }]
        }
      },
      url: {
        add: window._CONFIG['domianURL'] + '/terminal/cnTerminalIntegral/saveOrUpdate',
        edit: window._CONFIG['domianURL'] + '/terminal/cnTerminalIntegral/updateScoreNum'
      }
    }
  },
  methods: {
    handelSaveOk(value) {
      this.custName = value.name
      this.custCode = value.code
    },
    handleToCust() {
      this.$refs.CodeConfigModal.showModal()
    },
    selects(value) {
      this.terminalName = value[0].terminalName
      this.terminalCode = value[0].terminalCode
    },
    dotype(val) {
      this.selecttype = val
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.model.isRoll = this.model.isRoll + ''
      this.model.isControl = this.model.isControl + ''
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'terminalCode', 'terminalName',
          'custCode', 'custName', 'scoreNum'))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          method = 'post'
          let formData = Object.assign(this.model, values)
          if (this.title === '新增') {
            formData.terminalName = this.terminalName
            formData.terminalCode = this.terminalCode
            formData.custCode = this.custCode
            formData.custName = this.custName
            formData.dataType = 1
            httpurl += this.url.add
          } else {
            formData.dataType = 2
            httpurl += this.url.edit
          }
          //时间格式化
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>